<template>
  <div class="study_wrap">
    <div class="container">
      <div class="s_intro study_box">
        <h2 class="pub_title">课程介绍</h2>
        <el-row>
          <el-col
            class="items"
            :span="23"
            :xs="24"
            v-for="item in kcList"
            :key="item.id"
          >
            <el-image :src="item.src" />
            <div class="intro">
              <el-link :href="item.url" :underline="false">{{
                item.title
              }}</el-link>
              <span>{{ item.date }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="sf_mba study_box">
        <h2 class="pub_title">FMBA笔试题型介绍与练习</h2>
        <el-row>
          <el-col
            class="items"
            :span="14"
            :xs="24"
            v-for="item in fmbaList"
            :key="item.id"
          >
            <el-image :src="item.src" />
            <div class="intro">
              <el-link :href="item.url" :underline="false">{{
                item.title
              }}</el-link>
              <span>{{ item.date }}</span>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
  <div class="courses">
    <div class="container">
      <h2 class="pub_title">教授公开课</h2>
      <el-row class="study_box">
        <el-col
          class="items"
          :span="7"
          :xs="24"
          v-for="item in jsList"
          :key="item.id"
        >
          <el-image :src="item.src" />
          <div class="intro">
            <el-link :href="item.url" :underline="false">{{
              item.title
            }}</el-link>
            <span>{{ item.names }}</span>
            <span>{{ item.date }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
  <div class="meeting">
    <div class="container">
      <h2 class="pub_title">学长公开课</h2>
      <el-row class="study_box">
        <el-col
          class="items"
          :span="7"
          :xs="24"
          v-for="item in xzList"
          :key="item.id"
        >
          <el-image :src="item.src" />
          <div class="intro">
            <el-link :href="item.url" :underline="false">{{
              item.title
            }}</el-link>
            <span>{{ item.names }}</span>
            <span>{{ item.date }}</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "study",
  components: {},
  props: {},
  data() {
    return {
      show: false,
      kcList: [
        {
          id: 1,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
      ],
      fmbaList: [
        {
          id: 1,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
      ],
      jsList: [
        {
          id: 1,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 2,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 3,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 4,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 5,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 6,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "张华",
          date: "2021-10-20",
          url: "#",
        },
      ],
      xzList: [
        {
          id: 1,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "田际枫，陈思，王恩旭，刘海姣",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 2,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "田际枫，陈思，王恩旭，刘海姣",
          date: "2021-10-20",
          url: "#",
        },
        {
          id: 3,
          src: "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
          title: "中欧FMBA-GMAT合作奖学金",
          names: "田际枫，陈思，王恩旭，刘海姣",
          date: "2021-10-20",
          url: "#",
        },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
// study
.study_wrap {
  overflow: hidden;
  padding: 4% 0;
  .study_box {
    margin-right: 4%;
    float: left;
  }
  .sf_mba {
    width: 500px;
  }
  .pub_title {
    text-align: left;
  }
}

.courses {
  background: #fff;
  padding: 4% 0;
  overflow: hidden;
  .pub_title {
    text-align: left;
  }
  .items {
    margin-right: 5%;

    &:nth-child(3n + 0) {
      margin-right: 0;
    }
  }
}

.meeting {
  padding: 4% 0;
  overflow: hidden;
  .pub_title {
    text-align: left;
  }
  .items {
    margin-right: 5%;
    &:nth-child(3n + 0) {
      margin-right: 0;
    }
  }
}

// study public box
.study_box {
  overflow: hidden;
  .items {
    margin-top: 35px;
    width: 300px;
    .el-image {
      background-color: #ccc;
      width: 100%;
      height: 170px;
    }
    .intro {
      background: #fff;
      padding: 23px;
      line-height: 30px;
      .el-link {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        display: block;
        &:hover {
          color: #c6a67d;
        }
      }
      span {
        color: #949494;
        font-size: 16px;
      }
    }
  }
}
@media (max-width: 768px) {
  .study_wrap,
  .courses,
  .meeting {
    padding: 0 15px;
    margin-top: 5%;
    .pub_title {
      padding: 8% 0;
      text-align: center;
    }
  }
  .study_wrap {
    .study_box {
      margin: 0;
      float: none;
    }
    .sf_mba {
      width: auto;
    }
  }
  .study_box {
    .items {
      margin-top: 0;
      width: auto;
      .intro {
        padding: 5%;
        span {
          display: block;
        }
      }
    }
  }
}
</style>
